<template>
  <com-header title="实名认证"></com-header>
  <van-form @submit="onSubmit">
    <van-cell-group inset>
      <van-field
        v-model="user.realname"
        name="realname"
        required
        :rules="[{ required: true, message: '请填写姓名' }]"
        label="姓名"
      />
      <van-field
        v-model="user.idcard"
        name="validatorIDCard"
        required
        label="身份证号"
        :rules="[{ validator: validatorIDCard, message: '请输入正确身份证号' }]"
      />
      <van-field
        v-model="user.qq"
        required
        label="QQ"
        name="qq"
        :rules="[{ required: true, message: '请填写QQ' }]"
      />
      <!-- <van-field
        required
        label="身份证照片"
        :readonly="true"
        name="image"
        :rules="[{ required: true, message: '请上传身份证照片' }]"
      >
        <template #extra>
          <van-uploader :after-read="afterRead" />
        </template>
      </van-field> -->
      <van-field label="身份证照片" required
        name="file"
        :rules="[{ required: true, message: '请上传身份证照片' }]">
        <template #input>
          <van-uploader :after-read="afterRead" v-model="files" :max-count="1" style="text-align: right;" :deletable="false"/>
        </template>
      </van-field>
    </van-cell-group>
    <div style="margin: 20px 40px">
      <van-button round block type="default" v-if="is_rz">
        {{check == 1 ? '实名认证通过！' : '实名认证审核中'}}
      </van-button>
      <van-button round block type="primary" native-type="submit" v-else>
        提交认证
      </van-button>
      <van-button round block type="primary" style="margin-top: 30px" @click="loginOut">
        退出登录
      </van-button>
    </div>
  </van-form>
</template>
<script lang="ts">
import { defineComponent, ref, onMounted } from "vue";
import {uploadFile, getCertificationData} from '@/service/my'
import {useStore} from '@/stores/store'
import {fnMsg} from "@/plugins/common"
import { useRouter } from "vue-router";
type IUser = {
  id?: String;
  uid: String;
  realname: String;
  idcard: String;
  qq: String;
  image: any;
};
export default defineComponent({
  setup() {
    const store = useStore(), router = useRouter();
    const check = ref(0), is_rz = ref(false)
    const user = ref<IUser>({
      uid: store.state.user.uid,
      realname: "",
      idcard: "",
      qq: "",
      image: null
    });
    const files = ref<any>([])
    const validatorIDCard = (val: string): boolean => {
      //大陆身份证号码校验
      var isMatch = val.match(
        /^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$|^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/
      );

      //香港身份证号码校验
      //开头一位或两位大写字母，然后接上6-10位数字，最后一位数字或字母校验
      var isMatchHongKong = val.match(/^[A-Z]{1,2}[0-9]{6,10}[0-9A-Z]$/);

      //澳门身份证号码校验
      //开头数字1或者5或者7，然后接上6位数字，再接上一位数字或者大写字母校验
      var isMatchAoMen = val.match(/^[1|5|7][0-9]{6}[0-9A-Z]$/);

      //台湾身份证号码校验
      //开头一位小写或者大写字母，接上9位数字
      var isMatchTaiWan = val.match(/^[a-zA-Z][0-9]{9}$/);
      return !(!isMatch && !isMatchHongKong && !isMatchAoMen && !isMatchTaiWan);
    };

    const getData = () => {
      getCertificationData({uid: store.state.user.uid}).then(res => {
        console.log(res)
        if (res && res.status) {
          let {image} = res.data;
          user.value = res.data;
          console.log(user.value)
          files.value = [{url: image}]
          check.value = res.data.status;
          is_rz.value = (res.data.status == 2 || !res.data.id) ? false : true;
        } else {
          check.value = 0
        }
      })
    }

    const afterRead = (file: any) => {
      console.log(file)
      user.value.image = file.file;
    };

    const onSubmit = () => {
      console.log(user.value, '9')
      const param = new FormData();
      for (let i in user.value) {
          param.append(i, user.value[i]);
      }
      uploadFile(user.value.id ? 'User/realauthEdit' : 'User/realauth',param).then(res => {
        console.log(res)
        if (res) {
            fnMsg(res.msg);
            if (res.status) check.value = 1;
        }
      })
    };

    const loginOut = () => {
      store.commit('delUser')
      fnMsg('退出登录');
      router.push({path: '/home'})
    }

    onMounted(() => {
      getData()
    })

    return {
      user,
      validatorIDCard,
      onSubmit,
      afterRead,
      files,
      check,
      is_rz,
      loginOut
    };
  },
});
</script>
